<template>
  <div class="home">
    <!-- 轮播图 -->
    <div class="hero-carousel">
      <el-carousel :interval="5000" height="500px" arrow="hover" indicator-position="outside">
        <el-carousel-item v-for="(slide, index) in slides" :key="index">
          <div
            class="slide"
            :style="{ backgroundImage: `url(${slide.image})` }"
          >
            <div class="slideshow__text-wrap slideshow__overlay container">
              <div class="slideshow__text-content">
                <div class="wrap-caption center">
                  <p class="mega-small-title"><b>{{ slide.subtitle }}</b></p>
                  <h2 class="h1 mega-title slideshow__title">{{ slide.title }}</h2>
                  <span class="mega-subtitle slideshow__subtitle">{{ slide.description }}</span>
                  <div class="hero-button-wrapper mt-4">
                    <router-link :to="slide.link" class="btn btn-primary btn-hero">
                      {{ slide.buttonText }}
                    </router-link>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!-- 商品分类横幅 -->
    <section class="category-banners py-5">
      <div class="container">
        <div class="collection-banners">
          <div class="row">
            <div class="col-12 col-md-6 mb-4">
              <div class="imgBanner-grid-item main-banner">
                <div class="inner position-relative h-100">
                  <router-link to="/products?category=electronics" class="text-decoration-none d-block h-100">
                    <div class="banner-image h-100">
                      <img
                        :src="placeholderImage(600, 400)"
                        alt="电子产品"
                        class="img-fluid rounded h-100"
                      />
                    </div>
                    <div class="banner-content position-absolute bottom-0 start-0 p-4">
                      <span class="category-title h4 text-white fw-bold">电子产品</span>
                    </div>
                  </router-link>
                </div>
              </div>
            </div>

            <div class="col-12 col-md-6">
              <div class="row h-100">
                <div class="col-6 mb-4">
                  <div class="imgBanner-grid-item h-100">
                    <div class="inner position-relative h-100">
                      <router-link to="/products?category=clothing" class="text-decoration-none d-block h-100">
                        <div class="banner-image h-100">
                          <img
                            :src="placeholderImage(300, 200)"
                            alt="服装"
                            class="img-fluid rounded h-100"
                          />
                        </div>
                        <div class="banner-content position-absolute bottom-0 start-0 p-3">
                          <span class="category-title h6 text-white fw-bold">服装配饰</span>
                        </div>
                      </router-link>
                    </div>
                  </div>
                </div>

                <div class="col-6 mb-4">
                  <div class="imgBanner-grid-item h-100">
                    <div class="inner position-relative h-100">
                      <router-link to="/products?category=home" class="text-decoration-none d-block h-100">
                        <div class="banner-image h-100">
                          <img
                            :src="placeholderImage(300, 200)"
                            alt="家居用品"
                            class="img-fluid rounded h-100"
                          />
                        </div>
                        <div class="banner-content position-absolute bottom-0 start-0 p-3">
                          <span class="category-title h6 text-white fw-bold">家居用品</span>
                        </div>
                      </router-link>
                    </div>
                  </div>
                </div>

                <div class="col-12">
                  <div class="imgBanner-grid-item">
                    <div class="inner position-relative">
                      <router-link to="/products?category=books" class="text-decoration-none d-block">
                        <div class="banner-image">
                          <img
                            :src="placeholderImage(600, 150)"
                            alt="图书音像"
                            class="img-fluid rounded"
                          />
                        </div>
                        <div class="banner-content position-absolute bottom-0 start-0 p-3">
                          <span class="category-title h6 text-white fw-bold">图书音像</span>
                        </div>
                      </router-link>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 热门商品 -->
    <section class="featured-products py-5 bg-light">
      <div class="container">
        <header class="section-header text-center mb-5">
          <h2 class="section-title">热门商品</h2>
          <p class="section-subtitle">精选优质商品，品质保证</p>
        </header>

        <!-- 特色商品列表 -->
        <div class="row" v-if="!loadingFeaturedProducts && featuredProducts.length > 0">
          <div
            class="col-12 col-sm-6 col-lg-3 mb-4"
            v-for="product in featuredProducts"
            :key="product.id"
          >
            <div class="product-card card h-100">
              <div class="product-image">
                <img
                  :src="product.thumbnail || placeholderImage(300, 300)"
                  :alt="product.name"
                  class="card-img-top"
                  @error="(event) => { if (event.target) (event.target as HTMLImageElement).src = placeholderImage(300, 300) }"
                />
                <div class="product-actions">
                  <button class="btn btn-sm btn-primary" @click="addToCart(product)">
                    <i class="fas fa-shopping-cart"></i>
                  </button>
                  <button class="btn btn-sm btn-outline-danger">
                    <i class="fas fa-heart"></i>
                  </button>
                </div>
                <!-- 热门标签 -->
                <span class="badge bg-danger position-absolute top-0 start-0 m-2">热门</span>
              </div>

              <div class="card-body d-flex flex-column">
                <h6 class="product-title">
                  <router-link :to="`/products/${product.id}`" class="text-decoration-none">
                    {{ product.name }}
                  </router-link>
                </h6>
                <!-- 商品描述 -->
                <p class="product-description text-muted small flex-grow-1" v-if="product.description">
                  {{ product.description.length > 50 ? product.description.substring(0, 50) + '...' : product.description
                  }}
                </p>
                <div class="product-price mt-auto">
                  <span class="current-price text-primary fw-bold">
                    {{ formatPrice(product.price) }}
                  </span>
                  <span v-if="product.originalPrice > product.price"
                        class="original-price text-muted text-decoration-line-through ms-2">
                    {{ formatPrice(product.originalPrice) }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 特色商品加载状态 -->
        <div v-if="loadingFeaturedProducts" class="text-center py-5">
          <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">加载中...</span>
          </div>
          <p class="mt-2 text-muted">正在加载热门商品...</p>
        </div>

        <!-- 无数据提示 -->
        <div v-if="!loadingFeaturedProducts && featuredProducts.length === 0" class="text-center py-5">
          <i class="fas fa-box-open fa-3x text-muted mb-3"></i>
          <p class="text-muted">暂无热门商品</p>
        </div>

        <div class="text-center mt-4">
          <router-link to="/products" class="btn btn-outline-primary">
            查看更多商品 <i class="fas fa-arrow-right ms-2"></i>
          </router-link>
        </div>
      </div>
    </section>


    <!-- 品牌推荐 -->
    <div class="section brand-showcase py-5 bg-light">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <div class="section-header text-center mb-5">
              <h2 class="section-title">品牌推荐</h2>
              <p class="section-subtitle">汇聚全球知名品牌，品质有保障</p>
            </div>
          </div>
        </div>

        <div class="brand-grid">
          <!-- 品牌展示 -->
          <div class="col-6 col-md-4 col-lg-3 col-xl-2" v-for="brand in brands" :key="brand.id">
            <div class="brand-item text-center p-3">
              <router-link :to="`/products?brandId=${brand.id}`" class="text-decoration-none">
                <img
                  :src="brand.logoUrl"
                  :alt="brand.name"
                  class="brand-logo"
                  loading="lazy"
                  @error="handleBrandImageError"
                />
                <p class="brand-name mt-2 mb-0">{{ brand.name }}</p>
              </router-link>
            </div>
          </div>

          <!-- 品牌数据加载状态 -->
          <div v-if="loadingBrands" class="col-12 text-center">
            <div class="spinner-border text-primary" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 新品首发 -->
    <div class="section new-arrivals py-5">
      <div class="container">
        <div class="row">
          <div class="col-12">
            <div class="section-header text-center mb-5">
              <h2 class="section-title">
                <i class="fas fa-sparkles me-2"></i>新品首发
              </h2>
              <p class="section-subtitle">最新上架商品，第一时间体验</p>
            </div>
          </div>
        </div>

        <!-- 新品列表 -->
        <div class="row" v-if="!loadingNewProducts && newProducts.length > 0">
          <div
            class="col-12 col-sm-6 col-lg-3 mb-4"
            v-for="product in newProducts"
            :key="product.id"
          >
            <div class="new-product-card card h-100">
              <div class="product-image-wrapper position-relative">
                <img
                  :src="product.thumbnail || placeholderImage(300, 300)"
                  :alt="product.name"
                  class="product-image card-img-top"
                  @error="(event) => { if (event.target) (event.target as HTMLImageElement).src = placeholderImage(300, 300) }"
                />
                <div class="new-badge">
                  <span>NEW</span>
                </div>
                <div class="product-actions">
                  <button class="btn btn-sm btn-primary" @click="addToCart(product)">
                    <i class="fas fa-shopping-cart"></i>
                  </button>
                  <button class="btn btn-sm btn-outline-danger">
                    <i class="fas fa-heart"></i>
                  </button>
                  <button class="btn btn-sm btn-outline-secondary">
                    <i class="fas fa-eye"></i>
                  </button>
                </div>
              </div>

              <div class="card-body d-flex flex-column">
                <h6 class="product-title mb-2">
                  <router-link :to="`/products/${product.id}`" class="text-decoration-none">
                    {{ product.name }}
                  </router-link>
                </h6>
                <p class="product-description text-muted small mb-2">
                  {{ product.description.length > 50 ? product.description.substring(0, 50) + '...' : product.description
                  }}
                </p>
                <div class="product-price mt-auto">
                  <span class="current-price text-danger fw-bold">
                    {{ formatPrice(product.price) }}
                  </span>
                  <span v-if="product.originalPrice > product.price"
                        class="original-price text-muted text-decoration-line-through ms-2">
                    {{ formatPrice(product.originalPrice) }}
                  </span>
                </div>
                <div class="launch-time text-muted small mt-1">
                  {{ formatDate(product.createdTime) }} 上市
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 新品加载状态 -->
        <div v-if="loadingNewProducts" class="text-center py-5">
          <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">加载中...</span>
          </div>
          <p class="mt-2 text-muted">正在加载最新商品...</p>
        </div>

        <!-- 无数据提示 -->
        <div v-if="!loadingNewProducts && newProducts.length === 0" class="text-center py-5">
          <i class="fas fa-box-open fa-3x text-muted mb-3"></i>
          <p class="text-muted">暂无新品上架</p>
        </div>

        <div class="text-center mt-4">
          <router-link to="/products?sort=newest" class="btn btn-outline-primary">
            查看更多新品 <i class="fas fa-arrow-right ms-2"></i>
          </router-link>
        </div>
      </div>
    </div>

    <!-- 服务特色 -->
    <div class="section service-features py-5 bg-primary text-white">
      <div class="container">
        <div class="row">
          <div class="col-12 col-md-6 col-lg-3 mb-4 text-center">
            <div class="feature-item">
              <div class="feature-icon mb-3">
                <div class="feature-icon-circle">
                  <i class="fas fa-truck fa-2x"></i>
                </div>
              </div>
              <h5>免费配送</h5>
              <p class="opacity-75">满99元免费配送</p>
            </div>
          </div>

          <div class="col-12 col-md-6 col-lg-3 mb-4 text-center">
            <div class="feature-item">
              <div class="feature-icon mb-3">
                <div class="feature-icon-circle">
                  <i class="fas fa-shield-alt fa-2x"></i>
                </div>
              </div>
              <h5>品质保证</h5>
              <p class="opacity-75">正品保证，假一赔三</p>
            </div>
          </div>

          <div class="col-12 col-md-6 col-lg-3 mb-4 text-center">
            <div class="feature-item">
              <div class="feature-icon mb-3">
                <div class="feature-icon-circle">
                  <i class="fas fa-undo fa-2x"></i>
                </div>
              </div>
              <h5>七天退换</h5>
              <p class="opacity-75">7天无理由退换货</p>
            </div>
          </div>

          <div class="col-12 col-md-6 col-lg-3 mb-4 text-center">
            <div class="feature-item">
              <div class="feature-icon mb-3">
                <div class="feature-icon-circle">
                  <i class="fas fa-bell fa-2x"></i>
                </div>
              </div>
              <h5>消息通知</h5>
              <p class="opacity-75">及时接收订单状态通知</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useUserStore } from '@/stores/user'
import { useCartStore } from '@/stores/cart'
import { Message } from '@/utils/message'

// 导入真实的API调用
import { getBrandList } from '@/api/brand'
import { getProductList } from '@/api/product'
import type { Brand } from '@/types/brand'
import type { Product } from '@/types/product'

const userStore = useUserStore()
const cartStore = useCartStore()

// 占位符图片生成函数
const placeholderImage = (width: number, height: number) => {
  return `https://picsum.photos/${width}/${height}?random=${Math.floor(Math.random() * 1000)}`
}

// 处理品牌图片加载错误
const handleBrandImageError = (event: Event) => {
  const target = event.target as HTMLImageElement
  if (target) {
    target.src = placeholderImage(120, 60)
  }
}

// 轮播图数据（可以从配置或CMS系统获取，这里先保持静态）
const slides = ref([
  {
    image: 'https://picsum.photos/1920/500?random=1',
    subtitle: '新品上市',
    title: '发现完美的购物体验',
    description: '精选优质商品，为您提供最好的购物体验',
    buttonText: '立即购买',
    link: '/products'
  },
  {
    image: 'https://picsum.photos/1920/500?random=2',
    subtitle: '限时优惠',
    title: '电子商务HTML模板',
    description: '多用途电商Bootstrap HTML5模板',
    buttonText: '了解更多',
    link: '/products'
  },
  {
    image: 'https://picsum.photos/1920/500?random=3',
    subtitle: '品质保证',
    title: '完全可定制且易于修改',
    description: '为您的在线商店提供完美的网站解决方案',
    buttonText: '开始购物',
    link: '/products'
  }
])

// 品牌数据 - 从API获取
const brands = ref<Brand[]>([])
const loadingBrands = ref(false)

// 新品数据 - 从API获取最新商品
const newProducts = ref<Product[]>([])
const loadingNewProducts = ref(false)

// 特色商品数据 - 从API获取热门商品
const featuredProducts = ref<Product[]>([])
const loadingFeaturedProducts = ref(false)

// 获取品牌数据
const fetchBrands = async () => {
  try {
    loadingBrands.value = true
    const response = await getBrandList({
      status: 1, // 只获取启用的品牌
      page: 1,
      size: 10 // 首页只显示前10个品牌
    })
    brands.value = response.data.records.map(brand => {
      // 品牌logo映射表
      const brandLogos: Record<string, string> = {
        'apple': 'https://upload.wikimedia.org/wikipedia/commons/f/fa/Apple_logo_black.svg',
        'samsung': 'https://upload.wikimedia.org/wikipedia/commons/2/24/Samsung_Logo.svg', 
        'huawei': 'https://upload.wikimedia.org/wikipedia/commons/0/04/Huawei_Standard_logo.svg',
        'xiaomi': 'https://upload.wikimedia.org/wikipedia/commons/2/29/Xiaomi_logo.svg',
        'nike': 'https://upload.wikimedia.org/wikipedia/commons/a/a6/Logo_NIKE.svg',
        'adidas': 'https://upload.wikimedia.org/wikipedia/commons/2/20/Adidas_Logo.svg',
        'sony': 'https://upload.wikimedia.org/wikipedia/commons/c/ca/Sony_logo.svg',
        'lg': 'https://upload.wikimedia.org/wikipedia/commons/b/bf/LG_logo_%282015%29.svg',
        'dell': 'https://upload.wikimedia.org/wikipedia/commons/4/48/Dell_Logo.svg',
        'lenovo': 'https://upload.wikimedia.org/wikipedia/commons/0/03/Lenovo_Global_Corporate_Logo.svg'
      }
      
      return {
        ...brand,
        // 优先使用后端提供的logo，否则使用预定义的品牌logo，最后使用占位符
        logoUrl: brand.logoUrl || brandLogos[brand.slug] || placeholderImage(120, 60)
      }
    })
  } catch (error) {
    console.error('获取品牌数据失败:', error)
    Message.error('获取品牌数据失败')
  } finally {
    loadingBrands.value = false
  }
}

// 获取新品数据
const fetchNewProducts = async () => {
  try {
    loadingNewProducts.value = true
    const response = await getProductList({
      status: 1, // 只获取上架商品
      page: 1,
      size: 8 // 首页显示8个新品
    })

    // 按创建时间排序，获取最新的商品
    const sortedProducts = response.data.list
      .sort((a, b) => new Date(b.createdTime).getTime() - new Date(a.createdTime).getTime())
      .slice(0, 4) // 取前4个最新商品

    newProducts.value = sortedProducts
  } catch (error) {
    console.error('获取新品数据失败:', error)
    Message.error('获取新品数据失败')
  } finally {
    loadingNewProducts.value = false
  }
}

// 获取特色商品数据
const fetchFeaturedProducts = async () => {
  try {
    loadingFeaturedProducts.value = true
    const response = await getProductList({
      status: 1, // 只获取上架商品
      isHot: 1, // 只获取热门商品
      page: 1,
      size: 4 // 首页显示4个特色商品
    })
    featuredProducts.value = response.data.list
  } catch (error) {
    console.error('获取特色商品数据失败:', error)
    Message.error('获取特色商品数据失败')
  } finally {
    loadingFeaturedProducts.value = false
  }
}

// 格式化日期
const formatDate = (dateString: string) => {
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    month: 'short',
    day: 'numeric'
  })
}

// 格式化价格
const formatPrice = (price: number) => {
  return new Intl.NumberFormat('zh-CN', {
    style: 'currency',
    currency: 'CNY'
  }).format(price)
}

// 添加到购物车
const addToCart = async (product: Product) => {
  if (!userStore.isLoggedIn) {
    Message.warning('请先登录')
    return
  }

  try {
    await cartStore.addToCart(product.id, 1)
    Message.success('已添加到购物车')
  } catch (error: any) {
    console.error('添加到购物车失败:', error)
    const errorMessage = error.message || '添加失败，请重试'
    Message.error(errorMessage)
  }
}

// 组件挂载时获取数据
onMounted(() => {
  userStore.initUserInfo()
  if (userStore.isLoggedIn) {
    cartStore.fetchCartItems()
  }

  // 获取首页数据
  fetchBrands()
  fetchNewProducts()
  fetchFeaturedProducts()
})
</script>

<style scoped>
.slideshow {
  margin-bottom: 0;
}

.slide {
  height: 500px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
}

.slideshow__text-wrap {
  position: relative;
  z-index: 2;
  text-align: center;
  color: white;
}

.mega-small-title {
  font-size: 1.1rem;
  margin-bottom: 5px;
  margin-top: 0;
  opacity: 0.9;
  line-height: 1.4;
}

.mega-title {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 20px;
  margin-top: 15px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  line-height: 1.2;
}

.mega-subtitle {
  font-size: 1.2rem;
  margin-bottom: 0;
  opacity: 0.9;
  line-height: 1.6;
  display: block;
}

.hero-button-wrapper {
  margin-top: 30px;
  display: block;
}

.btn-hero {
  padding: 12px 30px;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 1px;
  box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
  transition: all 0.3s ease;
  text-decoration: none !important;
  display: inline-block;
}

.btn-hero:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
}

.imgBanner-grid-item {
  overflow: hidden;
  border-radius: 10px;
  transition: all 0.3s ease;
}

.imgBanner-grid-item:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

.banner-image {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

.banner-image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.imgBanner-grid-item:hover .banner-image img {
  transform: scale(1.05);
}

.banner-content {
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
  border-radius: 0 0 10px 10px;
  transition: all 0.3s ease;
}

.imgBanner-grid-item:hover .banner-content {
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
}

.category-title {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
  transition: all 0.3s ease;
}

.imgBanner-grid-item:hover .category-title {
  transform: translateY(-2px);
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 1);
}

.product-card {
  border: none;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  overflow: hidden;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
}

.product-image {
  position: relative;
  overflow: hidden;
}

.product-image img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.product-card:hover .product-image img {
  transform: scale(1.05);
}

.product-actions {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.product-card:hover .product-actions {
  opacity: 1;
}

.product-actions .btn {
  margin: 0 5px;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  padding: 0;
}

.product-title a {
  color: #333;
  font-weight: 500;
}

.product-title a:hover {
  color: #007bff;
}

.section-header {
  margin-bottom: 50px;
}

.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 15px;
}

.section-subtitle {
  font-size: 1.1rem;
  color: #666;
}

.feature-item {
  padding: 30px 20px;
}

.feature-icon {
  transition: transform 0.3s ease;
}

.feature-item:hover .feature-icon {
  transform: scale(1.1);
}

/* 品牌展示样式 */
.brand-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.brand-item {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  text-align: center;
}

.brand-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}

.brand-link {
  display: block;
  text-decoration: none;
}

.brand-logo {
  width: 100%;
  height: 60px;
  object-fit: contain;
  filter: grayscale(100%);
  transition: filter 0.3s ease;
}

.brand-item:hover .brand-logo {
  filter: grayscale(0%);
}

/* 新品首发样式 */
.new-product-card {
  border: none;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  overflow: hidden;
}

.new-product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.new-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
  color: white;
  padding: 5px 12px;
  border-radius: 12px;
  font-weight: bold;
  font-size: 11px;
  z-index: 2;
}

.launch-time {
  border-top: 1px solid #f0f0f0;
  padding-top: 5px;
}

/* 服务特色优化 */
.feature-icon-circle {
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  transition: all 0.3s ease;
}

.feature-item:hover .feature-icon-circle {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.3);
}
</style> 